<template>
  <a-drawer height="85%" placement="bottom" v-model:visible="visible" title="发圈详情" :footer="false">
    <div class="flex-col pt-20">
      <GiTable
        row-key="userWechatGroupId"
        v-model:columns="columns"
        :loading="loading"
        :data="tableData"
        :pagination="pagination"
        @refresh="getTableData"
        :simple="true"
      >
        <template #custom-extra>
          <a-space>
            <a-button type="outline">跟发源：{{ momentName }}</a-button>
          </a-space>
        </template>
      </GiTable>
    </div>
  </a-drawer>
</template>

<script setup>
import { detailmomentInfoDetail } from '@/apis'
import { usePagination } from '@/hooks'
import { deleteEmpty } from '@/utils/common'

const visible = ref(false)

const columns = ref([
  {
    title: '消息内容',
    tooltip: true,
    ellipsis: true,
    width: 200,
    render: (data) => {
      const text = data.record.title
      return h(MsCopyDiv, { text, title: '发圈内容', line: 2, no: true })
    }
  },
  {
    title: '消息类型',
    width: 100,
    render: (data) => {
      return data.record.momentName || '--'
    }
  },
  {
    title: '发圈情况',
    width: 100,
    render: (data) => {
      const status = data.record.status
      const type = status == 1 ? 'success' : status == -1 ? 'danger' : 'info'
      const text = status == 1 ? '发送成功' : status == -1 ? '发送失败' : '待发送'
      return h(GiDot, {
        animation: false,
        type: type,
        text: text
      })
    }
  },
  {
    title: '时间',
    width: 180,
    render: (data) => {
      return data.record.sendAt || '--'
    }
  },
  {
    title: '操作',
    width: 100,
    fixed: 'right',
    align: 'center',
    slotName: 'action'
  }
])

const loading = ref(false)
const tableData = ref([])
const listParams = reactive({
  page: 1,
  momentUserSendRecordId: undefined
})
const momentName = ref()

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 10 })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    const res = await detailmomentInfoDetail(deleteEmpty(listParams))
    tableData.value = res.data.list
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 打开编辑框并回显表单值
const open = (momentUserSendRecordId, momentNameO) => {
  momentName.value = momentNameO
  listParams.momentUserSendRecordId = momentUserSendRecordId
  visible.value = true
  changeCurrent(1)
}

defineExpose({ open })
</script>
<style scoped lang="scss"></style>
